<template>
  <div class="dashboard-container">
    <panel-group :statistics="statistics" @handleSetLineChartData="handleSetLineChartData" />
    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import { mapGetters } from 'vuex'
import { statistics, weekStatisticsDate } from '@/api/data'

export default {
  name: 'Dashboard',
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      statistics: {
        totalUserNum: 0,
        totalCommentNum: 0,
        totalLeaveNum: 0,
        totalReadNum: 0
      },
      weekStatisticsDate: {
        user: {
          lastWeekData: [0, 0, 0, 0, 0, 0, 0],
          weekData: [0, 0, 0, 0, 0, 0, 0]
        },
        leave: {
          lastWeekData: [0, 0, 0, 0, 0, 0, 0],
          weekData: [0, 0, 0, 0, 0, 0, 0]
        },
        comment: {
          lastWeekData: [0, 0, 0, 0, 0, 0, 0],
          weekData: [0, 0, 0, 0, 0, 0, 0]
        },
        read: {
          lastWeekData: [0, 0, 0, 0, 0, 0, 0],
          weekData: [0, 0, 0, 0, 0, 0, 0]
        }
      },
      lineChartData: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145]
      }
    }
  },
  computed: {
    ...mapGetters([
      'nickname'
    ])
  },
  created() {
    this.getStatistics()
    this.getWeekStatisticsDate()
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = this.weekStatisticsDate[type]
    },
    getStatistics() {
      statistics().then(response => {
        if (response.code === 200) {
          this.statistics = response.data
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
      })
    },
    getWeekStatisticsDate() {
      weekStatisticsDate().then(response => {
        if (response.code === 200) {
          this.weekStatisticsDate = response.data
          this.lineChartData = this.weekStatisticsDate.user
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
